<template>
  <div class="layout-page pb-32px">
    <NewsTop title="行业资讯" subTitle="算力行业前沿动态资讯" />
    <div class="layout-page-inner w-1328px">
      <el-breadcrumb :separator-icon="ArrowRight" class="my-16px">
        <el-breadcrumb-item to="/">首页</el-breadcrumb-item>
        <el-breadcrumb-item>行业资讯</el-breadcrumb-item>
      </el-breadcrumb>
      <el-tabs v-model="type">
        <el-tab-pane
          class="font-size-18px"
          v-for="pane in filterTypeList"
          :key="pane.value"
          :name="pane.value"
          :label="pane.label"
        />
      </el-tabs>
      <div class="card-container" v-loading="loading">
        <Card v-for="item in list" :key="item.id" :data="item" type="news" />
        <el-pagination
          v-show="list.length"
          class="justify-right"
          :total="total"
          layout="total, sizes, prev, pager, next"
          v-model:current-page="page.pageNum"
          v-model:page-size="page.pageSize"
          :page-sizes="[10, 20, 50, 100]"
        ></el-pagination>
        <Empty v-if="!list.length" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ArrowRight } from "@element-plus/icons-vue";
import { usePage, useLoading, useDict } from "@/hooks";
import NewsTop from "./components/newsTop.vue";
import Card from "./components/newsCard.vue";

const { list: typeList } = useDict("info_type");
const filterTypeList = computed(() =>
  typeList.value.filter((i) => {
    return ["4", "5"].includes(i.value) || i.value > 11;
  })
);
const type = ref("");

const route = useRoute();
watch(
  () => filterTypeList.value,
  (val) => {
    if (val.length) type.value = route.query.type || val[0].value;
  },
  {
    immediate: true,
  }
);

const list = ref([]);
const { page, total } = usePage();
const { loading, setLoading } = useLoading();
const $api = inject("$api");

const getList = async () => {
  setLoading(true);
  try {
    const { data: rows, total: resTotal } = await $api.news.getList({
      ...page.value,
      infoType: type.value,
      status: 1,
    });
    list.value = rows;
    total.value = resTotal;
  } finally {
    setLoading(false);
  }
};
watch(
  () => type.value,
  (val) => {
    if (!val) return;
    getList();
  },
  {
    immediate: true,
  }
);
</script>

<style scoped lang="less">
:deep(.el-tabs__item) {
  font-size: 16px !important;
}
</style>
